﻿@{ViewBag.Title = "PageTurning";}
@section css{
    <style>
        html,body{
            height:100%;
            overflow:hidden;
        }
        #tips{
            position:fixed;
            bottom:20px;
            width:100%;
            color:red;
            z-index:10;
        }
        .page-1{background-color: #083846;}
        .page-2{background-color: #9261BF;}
        .page-3{background-color: #F3533C;}
        .page-4{background-color: #FFBF50;}
    </style>
}
@section js{
    <script src="~/js/touch.min.js"></script>
    <script>
        var tips = document.getElementById('tips');
        function showmsg(msg) {
            tips.innerHTML = msg + ',' + new Date().getMilliseconds();
        }


        var interval = 500;

        var pageTurning = document.getElementsByClassName('pageTurning').item(0);


        var page = {
            current: 0,
            min : 0,
            max : pageTurning.getElementsByClassName('page').length
        };



        touch.on(pageTurning, 'touchstart', function (e) {
            e.preventDefault();
        });
        touch.on(pageTurning, 'swipe', function (e) {
            // 记录上一次的页码，之后判断页码是否改变，如果改变则翻页
            var tmpPage = page.current;
            switch (e.direction) {
                case 'up':
                    showmsg('向上滑动进入下一页');
                    page.current++;
                    break;
                case 'down':
                    showmsg('向下滑动进入上一页');
                    page.current--;
                    break;
                default:
            }
            // 如果当前是第一页
            if (page.current < page.min) { page.current = page.min; }
            if (page.current >= page.max) { page.current = page.max - 1; }

            // 如果页码改变了，则翻页
            if (tmpPage != page.current) {
                $(pageTurning).animate({ top: page.current * -100 + '%' }, interval, function () {
                    $(this).find('.page').eq(page.current).addClass('page-current').siblings().removeClass('page-current');
                });
            }
        });
</script>
}
<p id="tips">这里来提示</p>
<div class="pageTurning">
    <div class="page page-1 page-current">
        <div class="wrap">
            <p class="move moveToTop">1</p>
        </div>
    </div>
    <div class="page page-2">
        <div class="wrap">
            <p class="move moveToTop">2</p>
        </div>
    </div>
    <div class="page page-3">
        <div class="wrap">
            <p class="move moveToTop">3</p>
        </div>
    </div>
    <div class="page page-4">
        <div class="wrap">
            <p class="move moveToTop">4</p>
        </div>
    </div>
</div>
